<script setup lang="ts">
import {ref} from "vue";
import {message} from "ant-design-vue";
import router from "@/router";

interface Props {
  userList: API.UserVO[]
}

const props = withDefaults(defineProps<Props>(), {
  userList: () => []
})

// 默认头像
const defaultAvatar = 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'


// 查看用户详情
const showUserDetails = (userId) => {
  // 这里可以切换显示详细统计信息，或者跳转到用户详情页
  router.push({
    path: `/user/${userId}`,
  });
}
// 发送匹配请求
const sendMatchRequest = (userId) => {
  // 模拟发送匹配请求
  // message.success('匹配请求已发送，请等待对方回应')
  console.log('发送匹配请求给用户：', userId)
  router.push({
    path: '/chat',
    query: {
      id: userId,
      type: 'user'
    }
  })
  // 实际项目中这里应该调用后端API
}
</script>
<template>
  <div id="UserListCard">
    <div class="user-cards-grid">
      <div v-for="user in props.userList" :key="user.id" class="user-card">
        <!-- 用户头像 -->
        <div class="avatar-container">
          <a-avatar :size="80" :src="user.userAvatar || defaultAvatar"/>
        </div>

        <!-- 用户信息 -->
        <div class="user-info">
          <div class="user-name-section" :class="{ 'center-username': user.userRole !== 'admin' }">
            <h4 class="username">{{ user.username }}</h4>
            <span class="user-role" v-show="user.userRole === 'admin'">管理员</span>
          </div>

          <!-- 用户标签 -->
          <div class="user-tags">
            <a-tag v-for="tag in user.userTags || []" :key="tag" color="blue">
              {{ tag }}
            </a-tag>
            <div v-if="!(user.userTags && user.userTags.length)" class="empty-placeholder"></div>
          </div>

          <p class="user-profile">{{ user.userProfile || " " }}</p>
        </div>

        <!-- 技能匹配区域 -->
        <div class="skills-section">
          <!-- 对方能教的技能 -->
          <div class="skill-group">
            <span class="skill-label">能教:</span>
            <div class="skill-tags">
              <a-tag v-for="skill in user.teach || []" :key="skill" color="green">
                {{ skill }}
              </a-tag>
              <div v-if="!(user.teach && user.teach.length)" class="empty-skill-placeholder"></div>
            </div>
          </div>

          <!-- 对方想学的技能 -->
          <div class="skill-group">
            <span class="skill-label">想学:</span>
            <div class="skill-tags">
              <a-tag v-for="skill in user.learn || []" :key="skill" color="orange">
                {{ skill }}
              </a-tag>
              <div v-if="!(user.learn && user.learn.length)" class="empty-skill-placeholder"></div>
            </div>
          </div>
        </div>

        <!-- 用户数据统计 -->
        <div class="user-stats">
          <div class="stat-item">
            <span class="stat-value">{{ user.blogCount || 0 }}</span>
            <span class="stat-label">文章</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ user.followCount || 0 }}</span>
            <span class="stat-label">关注</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ user.fanCount || 0 }}</span>
            <span class="stat-label">粉丝</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ user.points || 0 }}</span>
            <span class="stat-label">积分</span>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <a-button size="small">
            <router-link :to="`/user/${user.id}`" target="_blank">
              查看详情
            </router-link>
          </a-button>
          <a-button type="primary" size="small" @click="sendMatchRequest(user.id)">
            发起匹配
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>

.threshold-value {
  margin-left: 10px;
  color: #1890ff;
  font-weight: bold;
}

.user-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

.user-card {
  padding: 20px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background: #fff;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.user-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.match-score-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.match-score-badge.excellent {
  background-color: #52c41a;
}

.match-score-badge.very-good {
  background-color: #1890ff;
}

.match-score-badge.good {
  background-color: #faad14;
}

.match-score-badge.normal {
  background-color: #f5222d;
}

.avatar-container {
  text-align: center;
  margin-bottom: 15px;
}

.user-info {
  text-align: center;
  margin-bottom: 15px;
}

.user-name-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.user-name-section.center-username {
  justify-content: center;
}

.username {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}

.user-role {
  padding: 2px 6px;
  background: #1890ff;
  color: white;
  font-size: 12px;
  border-radius: 4px;
}

.user-profile {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  min-height: 42px;
  max-height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.user-tags {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  min-height: 24px;
}

.empty-placeholder {
  width: 100%;
  height: 24px;
}

.skills-section {
  margin-bottom: 15px;
}

.skill-group {
  margin-bottom: 10px;
  min-height: 36px;
}

.skill-label {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 6px;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 24px;
}

.empty-skill-placeholder {
  width: 50px;
  height: 24px;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  padding: 15px 0;
  margin-bottom: 15px;
  border-top: 1px solid #f0f0f0;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #1890ff;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.action-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}
</style>
